<template>
	<view class="nft_wrap">
		<scroll-view class="nft_detail_wrap" scroll-y>
			<Detail />

			<view class="placeholder"></view>
		</scroll-view>

		<DetailSell v-if="detailSell" />

		<CenterDrawer v-model="drawer" :show-title="false" maskBg="rgba(19, 19, 19, 0.9)">
			<view class="drawer_content">
				<view class="title">{{ drawerContent.title }}</view>
				<view v-if="!drawerContent.scroll" class="tip">{{ drawerContent.tip }}</view>
				<scroll-view v-else class="scroll_tip tip" scroll-y scroll-with-animation @scrolltolower="scroll2Lower">
					{{ drawerContent.tip }}
				</scroll-view>
				<view class="btns">
					<view v-if="drawerContent.cancelBtn" class="cancel" @click="closeDrawer">{{ drawerContent.cancelText }}</view>
					<view
						:class="{ only: !drawerContent.cancelBtn, cancel: drawerContent.confirmDisabled, confirm: !drawerContent.confirmDisabled }"
						@click="confirmDrawer"
						>{{ drawerContent.confirmText }}</view
					>
				</view>
			</view>
		</CenterDrawer>
	</view>
</template>
<script>
import CenterDrawer from "@/components/drawer/CenterDrawer.vue";
import Detail from "./components/detail.vue";
import DetailSell from "./components/detailSell.vue";
export default {
	components: {
		Detail,
		CenterDrawer,
		DetailSell,
	},
	data() {
		return {
			detailSell: true,

			drawer: false,

			drawerContentModel: {
				realName: {
					title: "请先进行实名认证",
					tip: "在自由市场进行交易需要通过\n身份认证、开通钱包功能。",
					cancelText: "考虑一下",
					cancelBtn: true,
					confirmText: "立即认证",
				},

				address: {
					title: "请先开通钱包",
					tip: "在自由市场进行交易需要通过\n身份认证、开通钱包功能。",
					cancelText: "考虑一下",
					cancelBtn: true,
					confirmText: "现在开通",
				},

				service: {
					scroll: true,
					title: "服务协议悉知",
					tip: "文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容",
					cancelText: "取消",
					cancelBtn: true,
					confirmText: "同意",
					confirmDisabled: true,
				},
				listing: {
					title: "寄售上架成功！",
					tip: "恭喜您上架成功，数字藏品已经\n上架至自由市场。",
					cancelText: "取消",
					cancelBtn: false,
					confirmText: "确认",
				},
			},

			drawerContent: {},
		};
	},
	computed: {
		// drawerContent() {
		// 	return this.drawerContentModel.address;
		// },
	},

	mounted() {
		// this.$nextTick(() => {
		// 	this.drawer = true;
		// 	this.checkRealAndAddr();
		// });
	},

	methods: {

		checkRealAndAddr() {
			// this.drawerContent = this.drawerContentModel.realName;
			// this.drawerContent = this.drawerContentModel.address;
			// this.drawerContent = this.drawerContentModel.service;
			this.drawerContent = this.drawerContentModel.listing;
		},

		scroll2Lower() {
			if (typeof this.drawerContent.confirmDisabled === "boolean") {
				this.drawerContent.confirmDisabled = false;
			}
		},

		confirmDrawer() {
			if (typeof this.drawerContent.confirmDisabled === "boolean" && this.drawerContent.confirmDisabled) {
				return;
			}
			this.closeDrawer();
		},

		closeDrawer() {
			this.drawer = false;
		},
	},
};
</script>
<style lang="scss" scoped>
.nft_wrap {
	width: 100vw;
	height: 100vh;
	background-color: black;

	.nft_detail_wrap {
		width: 100%;
		height: calc(100vh - 160rpx);

		.placeholder {
			width: 100%;
			height: 360rpx;
		}
	}

	::v-deep .centerDrawer {
		width: 90vw;
		max-width: 700rpx;
		margin: 0 auto;
		border-radius: 30rpx;
	}

	.drawer_content {
		width: 100%;
		height: max-content;
		padding: 60rpx 0;
		margin: 0 auto;
		color: black;

		.title {
			font-size: 48rpx;
			font-weight: bold;
			margin-bottom: 40rpx;
			text-align: center;
		}

		.tip {
			font-size: 36rpx;
			text-align: center;
			margin-bottom: 60rpx;
			white-space: pre-line;
		}

		.scroll_tip {
			height: 40vh;
			overflow-y: scroll;
		}

		.btns {
			height: 90rpx;
			display: flex;
			justify-content: space-between;
			align-content: center;

			& > view {
				width: 45%;
				max-width: 290rpx;
				height: 90rpx;
				font-size: 32rpx;
				line-height: 90rpx;
				text-align: center;
				color: white;
				border-radius: 20rpx;
				font-weight: bold;
			}

			.cancel {
				background-color: #c4c4c4;
				color: #999999;
			}

			.confirm {
				background-color: #2359f8;

				&.only {
					width: 90%;
					max-width: none;
					margin: 0 auto;
				}
			}
		}
	}
}
</style>
